<template>
    <div class="progress-header">
        <div class="info">
            <img class="cover" :src="data.cover" alt="">
            <div class="right-content">
                <div class="desc">
                    <p class="title-warp" ref="titleRef" @click="viewDetail">
                        <span class="title">{{data.title}}</span>
                        <span v-if="hasMore()" class="more">
                            <span class="more-bg"></span>
                            <span class="txt" style="">
                                <img class="arrow" src="@/assets/images/comment/more-down-icon.png" alt="">
                            </span>
                        </span>
                        <span v-else>
                            <img  class="arrow " src="@/assets/images/comment/more-down-icon.png" alt="">
                        </span>
                    </p>
                </div>
                <p>
                    <span class="class">{{data.classHour || 0}}课时</span>
                    <span class="no-rate" v-if="!data.myScore" @click="toScore">去评分</span>
                    <span class="rate" v-else @click="toScore">已评分：<span class="num">{{data.myScore}}</span></span>
                </p>
            </div>
        </div>
        <div class="progress">
            <p class="study">
                <span class="title">学习进度：</span>
                <span class="cur">{{data.completeCourseWareCount}}</span>
                <span class="count">/共{{data.courseWareCount}}节</span>
            </p>
            <span class="line"></span>
            <p class="study">
                <span class="title">作业完成：</span>
                <span class="cur">{{data.completeHomeworkCount}}</span>
                <span class="count">/共{{data.homeworkCount}}篇</span>
            </p>
        </div>
    </div>
</template>

<script setup>
import { defineComponent, toRefs,ref, reactive, toRef, computed, onMounted, watch, nextTick } from "vue"
import TextOverflow from '@/components/text-fold.vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import envJudge from '@/lib/judge-env';
const route = useRoute()
const store = useStore()
const env = envJudge();
const isApp = reactive(['IOS', 'android'].includes(env));
const props = defineProps({
    data: {
        default: () => {},
        type: Object
    }
});
const titleRef = ref()

const splitText = computed(() => {
    return titleRef.value && titleRef.value.scrollHeight > 26 * 2 || false
})

// 简介是否超出最大长度
function hasMore(){
    return titleRef.value && titleRef.value.scrollHeight > 26 * 2 || false
}
// 看慕课二级详情
function viewDetail(){
    store.dispatch('jsBridge/disposeBridge', {
        method: 'goNewPage',
        url: {
            name: 'registeredDetail',
            params: {
                moocId: route.params.moocId
            }
        },
        naviBarHidden: false,
    })
}
// 跳评分页
function toScore(){
    store.dispatch('jsBridge/disposeBridge', {
        method: 'goNewPage',
        url: {
            name: 'rate',
            params: {
                moocId: route.params.moocId, 
                assessId: props.data.assessAppraiseId
            }
        },
        naviBarHidden: false
    })
}
function covertText(txt){
    if(splitText.value){
        return `${txt.substring(0, txt.length - 10)}...`
    }else {
        return txt
    }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    .progress-header{
        padding: 26px 15px 15px;
        box-sizing: border-box;
        width:100%;
        .info{
            display: flex;
            align-items: flex-start;
            .cover{
                width:135px;
                height:75px;
                border-radius: 4px;
                margin-right: 15px;
            }
            .right-content{
                flex: 1;
                .desc{
                    display: flex;
                }
                .title-warp{
                    display: -webkit-box;
                    overflow: hidden;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    word-break: break-all;
                    font-size: 18px;
                    font-weight: 600;
                    color: #171A1D;
                    margin-bottom: 10px;
                    line-height: 26px;
                    position: relative;
                    .more{
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        // background-color: #fff;
                        padding-left: 6px;
                        display: inline-flex;
                        line-height: 26px;
                        // height: 26px;
                        .more-bg{
                            width: 47px;
                            background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
                        }
                        .txt{
                            background: #fff;
                            padding-right: 10px;
                        }
                    }
                }
                .hidden{
                    max-height: 25 * 2px;
                    overflow: hidden;
                }
                .title{
                    font-size: 18px;
                    font-weight: 600;
                    color: #171A1D;
                }
                .arrow{
                    width:14px;
                    transform: rotate(-90deg);
                    margin-bottom: 2px;
                    margin-left: 4px;
                    // float: left;
                    // clear: both;
                    background: #fff;
                }
                .split{
                    position: absolute;
                    bottom: 7px;
                    right: 0;
                    margin-bottom: 0;
                }
                .class{
                    background: #FCF9F4;
                    border-radius: 2px;
                    border: 1px solid #F0D7BC;
                    font-size: 12px;
                    font-weight: 400;
                    color: #CE873A;
                    line-height: 18px;
                    padding: 2px 4px;
                    box-sizing: border-box;
                    margin-right: 10px;
                }
                .no-rate{
                    width:52px;
                    height:22px;
                    background: url('~@/assets/images/rate-bg.png') 0 0 no-repeat;
                    background-size: 100% 100%;
                    font-size: 13px;
                    font-weight: 400;
                    color: #0084F6;
                    padding-left: 10px;
                    box-sizing: border-box;
                    padding-bottom: 3px;
                }
                .rate{
                    font-size: 13px;
                    font-weight: 400;
                    color: #6E7074;
                    .num{
                        font-size: 15px;
                        font-weight: bold;
                        color: #0084F6;
                        text-decoration: underline;
                    }
                }
            }
        }
        .progress{
            background: linear-gradient(180deg, #F2F6FF 0%, #DFE8FF 100%);
            border-radius: 2px;
            padding: 15px 22px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            margin-top: 15px;
            position: relative;
            .line{
                width:1px;
                height: 13px;
                background-color: #A2A3A4;
                display: inline-block;
                margin-top: 10px;
            }
            // .study:first-child::after{
            //     content: '';
            //     // position: absolute;
            //     // left:50%;
            //     // top:50%;
            //     // transform: translate(-50%,-50%);
            //     width:1px;
            //     height: 13px;
            //     background-color: #A2A3A4;
            //     display: inline-block;

            // }
            .title{
                font-size: 13px;
                font-weight: bold;
                color: #171A1D;
                margin-right: 4px;
            }
            .cur{
                font-size: 24px;
                font-weight: bold;
                color: #0084F6;
            }
            .count{
                font-size: 13px;
                font-weight: 400;
                color: #6E7074;
            }
        }
    }
 
</style>
